﻿@model BlogWeb.Models.PicView

@{
    ViewBag.Title = "Uploadimg";
    Layout = "~/Views/Shared/_LayoutMain.cshtml";
}

@Styles.Render("~/Content/admin/css/maininfo")

@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()


 <!--main_top-->
    <table width="99%" border="0" cellspacing="0" cellpadding="0" id="searchmain">
        <tr>
            <td width="99%" align="left" valign="top">您的位置：博客管理&nbsp;&nbsp;>&nbsp;&nbsp;添加博客</td>
        </tr>
        <tr>
            <td align="left" valign="top" id="addinfo">
                <a href="add.html" target="mainFrame" onFocus="this.blur()" class="add">新增博客</a>
            </td>
        </tr>
        <tr>
            <td align="left" valign="top">
                <table width="100%" border="0" cellspacing="0" cellpadding="0" id="main-tab">
                    <tr onMouseOut="this.style.backgroundColor='#ffffff'" onMouseOver="this.style.backgroundColor='#edf5ff'">
                        <td align="right" valign="middle" class="borderright borderbottom bggray">照片标题：</td>
                        <td align="left" valign="middle" class="borderright borderbottom main-for">
                            @Html.EditorFor(model => model.Title, new { htmlAttributes = new { @class = "text-word" } })
                            @Html.ValidationMessageFor(model => model.Title, "", new { @class = "text-danger" })
                        </td>
                    </tr>
                    <tr onMouseOut="this.style.backgroundColor='#ffffff'" onMouseOver="this.style.backgroundColor='#edf5ff'">
                        <td align="right" valign="middle" class="borderright borderbottom bggray">照片图片：</td>
                        <td id="morepic" align="left" valign="middle" class="borderright borderbottom main-for">
                            @Html.TextAreaFor(model => model.PicUrls)
                            <span class="input-group-btn">
                                <button type="button" id="j_upload_img_btn" class="btn btn-primary">照片上传</button>
                            </span>
                           @Html.ValidationMessageFor(model => model.PicUrls, "", new { @class = "text-danger" })
                        </td>
                    </tr>
                    <tr onMouseOut="this.style.backgroundColor='#ffffff'" onMouseOver="this.style.backgroundColor='#edf5ff'">
                        <td align="right" valign="middle" class="borderright borderbottom bggray">照片显示：</td>
                        <td align="left" valign="middle" class="borderright borderbottom main-for">
                            <ul id="box" style="display:inline-block;"></ul>
                        </td>
                    </tr>

                    <tr onMouseOut="this.style.backgroundColor='#ffffff'" onMouseOver="this.style.backgroundColor='#edf5ff'">
                        <td align="right" valign="middle" class="borderright borderbottom bggray">&nbsp;</td>
                        <td align="left" valign="middle" class="borderright borderbottom main-for">
                            <input name="" type="submit" value="提交" class="text-but">
                            <input id="AddTime" name="AddTime" value="@DateTime.Now" type="hidden">
                            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
}

<textarea id="uploadEditor" style="display: none;"></textarea>>
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/UEditor/Config")
    @Scripts.Render("~/UEditor/uploadimg")
    <script>
        //上传图片标题的UE编辑器，只有上传图片功能 ，注意：并不是很完善
        var uploadEditor = UE.getEditor("uploadEditor", {
            isShow: false,
            focus: false,
            enableAutoSave: false,
            autoSyncData: false,
            autoFloatEnabled: false,
            wordCount: false,
            sourceEditor: null,
            scaleEnabled: true,
            toolbars: [["insertimage"]]
        });
        //绑定上图片按钮的单击事件，单击事件弹出上传图片标题的UE编辑器
        document.getElementById('j_upload_img_btn').onclick = function () {
            var dialog = uploadEditor.getDialog("insertimage");
            dialog.title = '上传图片';
            dialog.render();
            dialog.open();
        };

        // 监听多图上传和上传附件组件的插入动作
        uploadEditor.ready(function () {
            uploadEditor.addListener("beforeInsertImage", _beforeInsertImage);
        });

        // 多图上传动作
        function _beforeInsertImage(t, result) {
            var imageHtml = "";
            var pic_src = "";
            var y = 0;
            for (var i in result) {
                imageHtml += "<li><img src=\"" + result[i].src + "\" alt=\"" + result[i].alt + "\" height=\"150\"></li>";
                if (y < result.length - 1) {
                    pic_src += result[i].src + ",";
                }
                else {
                    pic_src += result[i].src ;
                }
                y++;
            }
            box.innerHTML = imageHtml;
            document.getElementById("PicUrls").value = pic_src;
        }
    </script>
}